<template>
  <div class="mod-config">
    <div style="position: relative">
      <div style="padding: 10px; right: 30px; position: absolute; top: 32px">
        <el-button type="primary" class="button" @click="handleDown"
          >导出报告</el-button
        >
      </div>
    </div>
    <div v-if="headerData.tool" class="pdf-main">
      <personalReportCopy
        v-if="headerData.tool.indexOf('霍兰德专业倾向测评量表') !== -1"
      ></personalReportCopy>
      <personalDepressed
        v-else-if="
          headerData.gaugeNameList[0].indexOf('抑郁自评量表(SDS)') !== -1
        "
      ></personalDepressed>

      <div id="exportPersonal" v-else style="width: 100%">
        <div class="content">
          <div class="textCenter">
            <div
              style="
                margin-bottom: 50px;
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 50px;
                color: #1e9fff;
              "
              class="title"
            >
              个人测评报告
            </div>
          </div>
          <div>
            <div class="headerCss">基本信息</div>
            <table border="1" class="table_style">
              <tbody>
                <tr>
                  <td class="minWidth">登录名</td>
                  <td class="minWidth">{{ headerData.account }}</td>
                  <td class="minWidth">姓名</td>
                  <td class="minWidth">{{ headerData.realName }}</td>
                  <td class="minWidth">性别</td>
                  <td class="minWidth">
                    {{
                      headerData.sex == 1
                        ? "男"
                        : headerData.sex == 2
                        ? "女"
                        : ""
                    }}
                  </td>
                </tr>
                <tr>
                  <td class="minWidth">年龄</td>
                  <td class="minWidth">
                    {{ headerData.age == -1 ? "" : headerData.age }}
                  </td>
                  <td class="minWidth">
                    {{ !isEnterprise ? "年级" : "岗位" }}
                  </td>
                  <td class="minWidth">
                    {{ headerData.gradeName }}
                  </td>
                  <td class="minWidth">
                    {{ !isEnterprise ? "班级" : "部门" }}
                  </td>
                  <td class="minWidth">
                    {{ headerData.classno }}
                  </td>
                  <!-- <td class="minWidth">部门</td>
                  <td class="minWidth">企业部门</td> -->
                </tr>

                <tr
                  v-for="(info, index) in infoList"
                  :key="index"
                  v-show="false"
                >
                  <td class="minWidth" v-if="index % 3 == 0">
                    {{ infoList[index].subject }}
                  </td>
                  <td class="minWidth" v-if="index % 3 == 0">
                    {{ infoList[index].selectAnswer }}
                  </td>
                  <td class="minWidth" v-if="index % 3 == 0">
                    {{ infoList[index + 1] ? infoList[index + 1].subject : "" }}
                  </td>
                  <td class="minWidth" v-if="index % 3 == 0">
                    {{
                      infoList[index + 1]
                        ? infoList[index + 1].selectAnswer
                        : ""
                    }}
                  </td>
                  <td colspan="2" class="minWidth" v-if="index % 3 == 0">
                    {{ infoList[index + 2] ? infoList[index + 2].subject : "" }}
                  </td>
                  <td colspan="2" class="minWidth" v-if="index % 3 == 0">
                    {{
                      infoList[index + 2]
                        ? infoList[index + 2].selectAnswer
                        : ""
                    }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br />
          <div>
            <div class="headerCss">测验结果</div>
            <table border="1" class="table_style">
              <tbody>
                <tr>
                  <td>测验工具</td>
                  <td>{{ headerData.tool }}</td>
                  <td>测验用时(秒)</td>
                  <td>{{ headerData.duration }}</td>
                </tr>
                <tr>
                  <td>测验日期</td>
                  <td>{{ headerData.startDate }}</td>
                  <td>测评次数</td>
                  <td>{{ headerData.count }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <br />
          <div>
            <div class="headerCss">测评介绍</div>
            <div style="border: 1px solid gainsboro">
              <span style="padding: 10px; display: inline-block">
                {{ headerData.introduce }}</span
              >
            </div>
          </div>
          <br />
          <div>
            <div class="headerCss">因子得分</div>
            <table border="1" class="table_style">
              <tbody>
                <tr>
                  <td class="minWidth">因子名称</td>
                  <td class="minWidth">因子得分</td>
                  <td class="minWidth">因子结论</td>
                </tr>
                <tr v-for="(item, index) in data" :key="index">
                  <td class="minWidth">{{ item.factorName }}</td>
                  <td class="minWidth">{{ item.score }}</td>
                  <td class="minWidth">{{ item.totalRemark }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div>
            <div>
              <span
                class=""
                style="
                  font-size: 20px;
                  margin-top: 5px;
                  margin-left: 20px;
                  display: inline-block;
                "
              ></span>
            </div>
            <div id="echarts_box" style="height: 450px"></div>
          </div>
          <div>
            <div
              v-for="item in data"
              :key="item.count"
              style="border: 1px solid gainsboro; margin-bottom: 20px"
            >
              <div class="titleCss">
                <span
                  class=""
                  style="
                    font-size: 20px;
                    margin-top: 5px;
                    display: inline-block;
                  "
                  >【{{ item.factorName }}】</span
                >
              </div>
              <div>【得分解释】</div>
              <div style="padding: 15px" v-html="item.explainRemark"></div>
              <hr style="border: 1px solid gainsboro" />
              <div>【辅导建议】</div>
              <div style="padding: 15px" v-html="item.suggest"></div>
            </div>
          </div>
        </div>

        <!-- <div class="logo"><img src="./img/logo.png" alt="" /></div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonalReport } from "@/api/evaluation/personal";
import personalReportCopy from "./personalReportCopy";
import personalDepressed from "./personalDepressed.vue";
import htmlToPdf from "@/util/htmlToPdf";
import * as echarts from "echarts";
import { mapState, mapGetters } from "vuex";
export default {
  name: "exportPersonal",
  data() {
    // 和导出pdf没关系
    return {
      headerData: {
        dimId: "",
      },
      data: [],
      infoList: [],
      loading: false,
      list: [
        "现实型",
        "研究型",
        "艺术型",
        "社会型",
        "企业型",
        "常规型",
        "霍兰德代码",
      ],
      tenantId: "",
    };
  },
  created() {
    this.getList();
    this.tenantId =
      JSON.parse(localStorage.getItem("saber-userInfo")).content.tenantId || "";
  },
  computed: {
    ...mapState(["enterprise"]),
    ...mapGetters(["userInfo"]),
    isEnterprise() {
      const type = this.userInfo.schoolType;
      return type == 8 || type == 9;
    },
  },
  methods: {
    getBarChartInfo(xAxisData, seriesData) {
      var myChart = echarts.init(document.getElementById("echarts_box"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "因子图表",
          textStyle: {
            fontSize: 28,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
              fontSize: 16,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "因子图表",
            type: "bar",
            barWidth: 30,
            data: seriesData,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      });
    },
    getChartInfo(radarData, seriesData) {
      //雷达图
      var myChart = echarts.init(document.getElementById("echarts_box"));
      // 3. 使用刚指定的配置项和数据，显示图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: "因子图表",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: 40,
          containLabel: true,
        },
        legend: {
          data: ["职业倾向分布"],
        },
        radar: {
          // shape: 'circle',
          indicator: radarData,
          axisName: {
            color: "black",
          },
          nameGap: 3,
          startAngle: 150,
        },
        series: [
          {
            name: "职业倾向分布",
            type: "radar",
            barWidth: 60,
            data: [{ value: seriesData, name: "职业倾向分布" }],
            label: {
              show: true,
            },
          },
        ],
      });
    },
    getDashboard() {
      let acore = this.data[0].score;
      //仪表盘
      var chartDom = document.getElementById("echarts_box");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 10,
            itemStyle: {
              color: "#FFAB91",
            },
            progress: {
              show: true,
              width: 30,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 30,
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              distance: -20,
              color: "#999",
              fontSize: 20,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, "-15%"],
              fontSize: 60,
              fontWeight: "bolder",
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: acore,
              },
            ],
          },
          // {
          //   type: "gauge",
          //   center: ["50%", "60%"],
          //   startAngle: 200,
          //   endAngle: -20,
          //   min: 0,
          //   max: 60,
          //   itemStyle: {
          //     color: "#FD7347",
          //   },
          //   progress: {
          //     show: true,
          //     width: 8,
          //   },
          //   pointer: {
          //     show: false,
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     show: false,
          //   },
          //   detail: {
          //     show: false,
          //   },
          //   data: [
          //     {
          //       value: 20,
          //     },
          //   ],
          // },
        ],
      };

      option && myChart.setOption(option);
    },
    getList() {
      getPersonalReport(Object.assign({ id: this.$route.query.id })).then(
        (res) => {
          const data = res.data.data;
          this.headerData = data;
          this.infoList = data.infoList;
          this.data = data.factorList;
          // let list = [];
          // this.list.map((item) => {
          //   this.data.map((item2) => {
          //     if (item2.factorName.indexOf(item) > -1) {
          //       list.push(item2);
          //     }
          //   });
          // });
          // this.data = list;
          if (data.tool.indexOf("霍兰德专业倾向测评量表") !== -1) {
            return;
          }
          if (data.gaugeNameList[0].indexOf("抑郁自评量表(SDS)") !== -1) {
            this.$nextTick(() => {
              this.getDashboard();
            });
            return;
          }

          let xAxisData = [];
          let seriesData = [];
          for (let i = 0; i < data.factorList.length; i++) {
            let rowData = data.factorList[i];
            if (
              rowData.factorName !== "总分" &&
              rowData.factorName !== "总均分" &&
              rowData.factorName !== "阳性项目数" &&
              rowData.factorName !== "综合型" &&
              rowData.factorName !== "霍兰德代码"
            ) {
              // xAxisData.push({ name: rowData.factorName, max: 15 }); //雷达图
              xAxisData.push(rowData.factorName);
              seriesData.push(rowData.score);
            }
          }
          // this.getChartInfo(xAxisData.reverse(), seriesData.reverse()); //雷达图
          this.$nextTick(() => {
            this.getBarChartInfo(xAxisData, seriesData);
          });
        }
      );
    },
    handleDown() {
      this.$loading({
        lock: true,
        text: "正在导出报告...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      htmlToPdf.downloadPDF(
        document.querySelector("#exportPersonal"),
        this.headerData.realName + "-" + this.headerData.tool + "-个人分析报告",
        this
      );
    },
  },
  components: {
    personalReportCopy,
    personalDepressed,
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 22px !important;
}
.title {
  font-size: 28px !important;
}
.button {
  font-size: 16px !important;
}
.logo {
  position: absolute;
  top: 0px;
  right: 80px;

  img {
    width: 140px;
  }
}
.content {
  padding: 0px 50px 0 60px;
}
.pdf-main {
  padding-top: 100px;
}
.mod-config {
  background: white;
}
.minWidth {
  min-width: 50px;
}
#exportPersonal {
  background-color: #fff;
  width: 1090px !important;
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  padding-top: 30px;
  box-sizing: border-box;
  position: relative;
}
.headerCss {
  font-weight: 800;
  color: white;
  background: #2196f3;
  padding: 8px 10px 8px 10px;
  margin-bottom: 20px;
  font-size: 27px !important;
}
.titleCss {
  background: gainsboro;
  height: 45px;
  /* margin-top: 20px; */
  margin-bottom: 10px;

  span {
    font-size: 23px !important;
  }
}
.table_style td,
th {
  padding: 10px;
  font-size: 15px;
}
.textCenter {
  text-align: center;
}
.table_style {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
</style>
